<!DOCTYPE html>

<html lang="zh">

	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="./title.png" type="image/x-icon" />
		<link rel="shortcut icon" href="./title.png" type="image/x-icon" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="keywords" content="记忆翻牌游戏, 益智游戏, 动漫人物, H5小游戏, JS小游戏" />
		<meta name="description" content="你需要记住你每次翻开的卡片，用最短的时间完成所有配对！" />
		<title>JS翻牌小游戏</title>
		<script type="text/javascript" src="./js/before-start.js"></script>
		<script type="text/javascript" src="https://unpkg.com/vue@3.x.x/dist/vue.global.prod.js" onload="beforeStart()"></script>
		<!-- 默认样式 -->
		<link rel="stylesheet" href="./css/default.css" type="text/css" />
		<!-- 引入 Element Plus 样式和组件库 -->
		<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
		<script src="https://unpkg.com/element-plus"></script>
		<!-- 页面基本样式 -->
		<link rel="stylesheet" href="./css/content.css" type="text/css" />
		<link rel="stylesheet" href="./css/interaction.css" type="text/css" />
		<!-- 字体 -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia" />
		<!-- 自定义 Element Plus 样式 -->
		<link rel="stylesheet" href="./css/el-custom.css" type="text/css" />
	</head>

	<body>
		
		<div id="app">
			<header class="top">
				<h1 class="top-title" v-html="title.name" title="关于" @click="about()"></h1>
				<el-button type="primary" round size="medium" @click="settings.show = true">{{ settingText }}</el-button>
			</header>
			
			<div class="container">
				<div class="game-operation" data-tip="请选择你的游戏难度" v-if="game.list.length === 0 && game.playing === false">
					<div class="content-input" :data-difficulty="Number(game.difficulty) * 2">
						<el-slider v-model="game.difficulty" :min="cards.length > 2 ? 2 : 0" :max="cards.length > 2 ? cards.length : 0" :show-tooltip="false"></el-slider>
					</div>
					<button class="start-game" title="点击按钮开始游戏" @click="startGame()" data-text="开始游戏"></button>
				</div>
				<div class="loading-progress" :style="`--loading-pg: ${parseInt(game.loaded / (game.difficulty + 1) * 100)}%`" v-if="game.loading"></div>
				<ul class="cards-list" v-if="game.list.length !== 0">
					<li :class="item.isShow ? 'card card-show' : 'card card-hide'" v-for="(item, index) in game.list" :key="index" :key="item" @click="showCard(item, index)">
						<img alt="card" :src="item.src" v-show="item.isShow" :class="item.bingo && settings.signColor ? 'bingo' : ' '" />
					</li>
				</ul>
			</div>
			
			
			<div class="mask" v-if="settings.show">
				<div class="dialog" :data-title="settings.title">
					<div class="dialog-content" style="padding: 0 0 10px 0; margin-top: 0;">
						<ul class="settings-items">
							<li data-title="重新开始游戏">
								<button class="reset-game" title="重新开始游戏" @click="resetGame()">重置</button>
							</li>
							<li data-title="游戏计时（更改后在下一局游戏生效）">
								<input class="switch" type="checkbox" id="timer" placeholder="游戏计时" v-model="settings.useTimer" />
								<label class="switch" for="timer"></label>
							</li>
							<li data-title="已配对的卡牌标记颜色">
								<input class="switch" type="checkbox" id="sign" placeholder="标记卡牌颜色" v-model="settings.signColor" />
								<label class="switch" for="sign"></label>
							</li>
							<li data-title="背景音乐">
								<input class="switch" type="checkbox" id="bgm" placeholder="背景音乐开关" v-model="settings.bgm" />
								<label class="switch" for="bgm" @click="playBgm()"></label>
							</li>
							<li :data-title="`音乐音量（${settings.volume}%）`" :style="settings.bgm ? 'opacity: 1;' : 'opacity: 0.5;'">
								<el-slider v-model="settings.volume" @input="setVolume()"></el-slider>
							</li>
							<li data-title="配对完成时弹出提示">
								<input class="switch" type="checkbox" id="completion" placeholder="完成提示" v-model="settings.completionTip" />
								<label class="switch" for="completion"></label>
							</li>
						</ul>
					</div>
					<div class="dialog-operation">
						<button :data-text="settings.btn.text" :title="settings.btn.tip" @click="settings.show = false"></button>
					</div>
				</div>
			</div>
			
			<div class="mask" v-if="msgBox.show">
				<div class="dialog" :data-title="msgBox.title">
					<div class="dialog-content">
						<p v-html="msgBox.content"></p>
					</div>
					<div class="dialog-operation">
						<button :data-text="msgBox.btn.text" :title="msgBox.btn.tip" @click="closeMsgBox()"></button>
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript" src="./js/action.js"></script>
		
	</body>

</html>
